<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="generator" content="Bootply"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">-->
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/global.css"/>
    <link rel="stylesheet" type="text/css" href="/css/signin.css"/>

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/jquery.validate.min.js"></script>
    <link rel="icon" type="image/png" href="/images/favicon.ico"/>
    <!--[if lte IE 9]>
    <script type="text/javascript" src="/js/jquery.placeholder.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/js/html5shiv.min.js"></script>
    <script type="text/javascript" src="/js/respond.min.js"></script>
    <script type="text/javascript" src="/js/html5boilerplate.js"></script>
    <![endif]-->
    <!--引入vue-->
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <style>
        html {
            height: 100%;
        }

        .signin {
            background-image: url("/images/login_background.gif");
        }
        .login-body{
            width: 900px;
            height: 400px;
            opacity:50%;
            background-color: white;
            position: absolute;
            clear: none;
            left:0; right:0; top:50px; bottom:0;
            margin:80px auto;
        }
    </style>
</head>
<body style="height: 100%;">

<div class="signin">
    <div class="signin-header">
        <div class="signin-container">
            <div class="pull-left">
                <a href="#" style="margin-left: 0px"><img style="margin-top: auto" src="/images/login_logo.png">
                    <div style="float: right" class="text">登录学天下账号</div></a>
            </div>
            <div class="pull-right">

                没有帐号，<a class="color-lnk" href="/reg.html">免费注册</a>

            </div>
        </div>
    </div><!-- /.sigin-header -->
    <div class="signin-body">
        <div class="login-body"></div>
        <div class="signin-container text-center">
            <h1 style="color:orange;opacity: 1">登&nbsp;&nbsp;&nbsp;录</h1>


            <style>
                .dropdown-menu > li > a {
                    text-align: left;
                }
            </style>
            <div id="app">
                <form role="form" action="#" class="form-horizontal signin-form" id="login-form">


                    <div class="form-group">
                        <label for="username" class="col-xs-2 control-label">账号</label>
                        <div class="col-xs-10">
                            <div class="form-icon">
                                <span class="signin-icon signin-user"></span>
                            </div>
                            <input v-model="username" type="text" class="form-control" tabindex="1" accesskey="u"
                                   id="username" placeholder="用户名/邮箱/手机号" autocomplete="off" maxlength="50"
                                   required="required">
                            <div class="help-block"><span class="signin-icon signin-info"></span>用户名、邮箱或手机号</div>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="left: 15px;">
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#" format="@sina.com"></a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#" format="@163.com"></a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#" format="@qq.com"></a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#" format="@126.com"></a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#" format="@sina.cn"></a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#" format="@hotmail.com"></a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#" format="@gmail.com"></a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#" format="@sohu.com"></a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#" format="@139.com"></a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#" format="@wo.com.cn"></a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#" format="@189.com"></a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#" format="@21cn.com"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-xs-2 control-label">密码</label>
                        <div class="col-xs-10">
                            <div class="form-icon">
                                <span class="signin-icon signin-pwd"></span>
                            </div>
                            <input v-model="password" type="password" class="form-control" id="password" tabindex="2"
                                   autocomplete="off" placeholder="请输入密码" maxlength="16" required="required">
                            <div class="help-block"><span class="signin-icon signin-info"></span>6-16位数字、字母或字符的组合</div>
                        </div>
                    </div>
                    <!--<div class="form-group">-->
                    <!--<label for="text" class="col-xs-2 control-label">验证码</label>-->
                    <!--<div class="col-xs-5">-->
                    <!--<input type="text" class="form-control verification-code" name="captcha" maxLength="6" placeholder="验证码">-->
                    <!--<div class="help-block"><span class="signin-icon signin-info"></span>请输入验证码</div>-->
                    <!--</div>-->
                    <!--<div class="col-xs-5">-->
                    <!--<div class="verification-blk">-->
                    <!--<img src="images/code.jpg" alt="验证码">-->
                    <!--<a href="#" class="color-lnk">换一换</a>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <div class="signin-helper row">
                        <div class="col-xs-5 col-xs-offset-2 text-left">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="remember_me" value="remember" checked="checked">7天内自动登录
                                </label>
                            </div>
                        </div>
                        <div class="col-xs-5 text-right">

                            <a href="forget.html" class="forget-pwd-lnk color-lnk">忘记密码？</a>

                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-10 col-xs-offset-2">
                            <input type="hidden" id="lt" name="lt" value="LT-1428624317rs0wBPrGW-5N5dU7C7B"/>
                            <input type="hidden" id="service" name="service"
                                   value="http:&#x2F;&#x2F;www.kaikeba.com&#x2F;users&#x2F;service"/>
                            <button id="login-submit" type="button" class="btn btn-warning btn-block" @click="login()">
                                登录
                            </button>
                            {{msg}}
                        </div>
                    </div>
                    <div class="text-right">

                        没有帐号，<a class="color-lnk" href="/reg.html">免费注册</a>

                    </div>
                </form>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#login-form').validate({
                        errorClass: "has-error help-block",
                        validClass: "has-success help-block",
                        errorElement: "div",
                        onkeyup: function (element) {
                            this.element(element);
                        },
                        ignore: "",
                        rules: {
                            "username": {required: true, username_email_mobile: true},
                            "password": {required: true, minlength: 6}
                        },
                        messages: {
                            username: '<span class="signin-icon signin-alert"></span>请输入用户名、邮箱或手机号',
                            password: '<span class="signin-icon signin-alert"></span>6-16位数字、字母或字符的组合',
                            captcha: '<span class="signin-icon signin-alert"></span>验证码不正确'
                        },
                        onfocusout: function (element) {
                            this.element(element);
                        },
                        errorPlacement: function (error, element) {
                            element.siblings('.help-block').replaceWith(error);
                        },
                        highlight: function (element, errorClass, validClass) {
                            $(element).closest('.form-group').addClass(errorClass).removeClass(validClass);
                        },
                        unhighlight: function (element, errorClass, validClass) {
                            $(element).siblings('.help-block').hide();
                            $(element).closest('.form-group').addClass(validClass).removeClass(errorClass);
                        },
                        submitHandler: function (form) {
                            $("#login-submit").attr("disabled", "disabled").val("请稍候...");
                            form.submit();
                            return true;
                        }
                    });


                    //取消jquery.placeholder的a标签BUG
                    $('.signin-form .form-group .dropdown-menu a[href="#"]').click(function (e) {
                        e.preventDefault();
                    });

                    // 关于邮箱手机输入框的各种效果
                    function bindEmailEvent() {

                        var timer = null;
                        var $dropdown = $(".dropdown-menu");
                        var $list = $dropdown.find("li");
                        var $txtMailMobile = $("#username");

                        // 列表点击
                        $list.mousedown(function () {
                            var text = $(this).find("a").html();
                            $txtMailMobile.val(text).focus();
                            $txtMailMobile.parent().addClass("status-success");
                            setTimeout(function () {
                                hideDropDown();
                            }, 100)
                        });

                        // 手机号邮箱输入框前的小图标切换
                        // 以及离开的时候验证码的切换
                        $txtMailMobile.keyup(function (e) {
                            letterKeyEvent(this, e.keyCode);
                        }).blur(function () {
                            setTimeout(function () {
                                hideDropDown();
                            }, 100)
                        }).keydown(function (e) {   // keydown 中可以阻止上下键的默认行为
                            var txt = $(this).val();
                            // 如果提示下拉列表显示出来并且点击了上下键/回车键，做完键盘事件直接返回
                            var index = txt.indexOf("@");
                            if (index > -1) {
                                var code = e.keyCode;
                                var flag = helpKeyEvent(code, $list, this);
                                return flag;
                            }
                            return true;
                        });


                        // 邮件框中的字母键键盘事件
                        function letterKeyEvent(obj, code) {

                            var txt = $(obj).val();

                            // 输入框前边的小图标更换
                            if (isNum(txt) || txt == "") {  //
                                $(obj).removeClass("bg-mail");
                                hideDropDown();
                            } else {  // 邮件
                                $(obj).addClass("bg-mail");

                                // 如果有@再显示 / 输入字母的时候再显示
                                var index = txt.indexOf("@");
                                if (index > -1) {
                                    // 回车选中的时候不触发up事件
                                    if (code == 13) {
                                        return false;
                                    }

                                    var stuffix = txt.substring(index);
                                    var prefix = txt.substring(0, index);
                                    if (index == -1) {
                                        prefix = txt;
                                        stuffix = "@";
                                    }

//                        clearTimeout(timer);
//                        timer = setTimeout(function () {
                                    $list.hide();
                                    var $result = $list.filter(":has(a[format^='" + stuffix + "'])");
                                    if ($result.length == 0) {
                                        hideDropDown();
                                        return;
                                    }
                                    $result.each(function () {
                                        var $a = $(this).find("a");
                                        $a.html(prefix + $a.attr("format"));
                                    }).show();
                                    $dropdown.show();
//                        }, 100);
                                }
                            }
                        }

                        // 邮件框中的功能键键盘事件
                        function helpKeyEvent(code, $list, input) {
                            var $result = $list.filter(":visible");
                            var resultLen = $result.length;
                            if (resultLen == 0) {
                                return true;
                            }

                            // 是否有激活的
                            var $activeItem = $result.filter(".active").eq(0);
                            var activeLen = $activeItem.length;
                            var isActive = activeLen > 0;
                            var activeIndex = getIndex($result, $activeItem);

                            // 点击上下箭头，初始化都选中第一个
                            if (code == 38) {  // ↑
                                if (!isActive) { 	// 没有激活的
                                    $result.eq(0).addClass("active");
                                } else if (activeIndex > 0) { // 是激活的并且选中的不是最后一个
                                    $list.removeClass("active");
                                    $result.eq(activeIndex - 1).addClass("active");
                                }
                            } else if (code == 40) { //↓
                                if (!isActive) { 	// 没有激活的
                                    $result.eq(0).addClass("active");
                                } else if (activeIndex < resultLen - 1) { // 是激活的并且选中的不是最后一个
                                    $list.removeClass("active");
                                    $result.eq(activeIndex + 1).addClass("active");
                                }
                            } else if (code == 13) { // 回车
                                if (isActive) {
                                    $(input).val($activeItem.eq(0).find("a").html());
                                    hideDropDown();
                                }
                            } else {
                                return true;
                            }
                            return false;
                        }

                        // 取下标
                        function getIndex(list, item) {
                            var len = list.length;
                            for (var i = 0; i < len; i++) {
                                if ($(list[i]).get(0) == $(item).get(0)) {
                                    return i;
                                }
                            }
                            return -1;
                        }

                        // 隐藏下拉列表
                        function hideDropDown() {
                            $dropdown.hide();
                            $list.removeClass("active");
                        }

                    }

                    // 验证是否为数字
                    function isNum(txt) {
                        return /^\d+$/.test(txt);
                    }

                    bindEmailEvent();
                })
            </script>
            <!--vue-->
            <script>
                var app = new Vue({
                    el: "#app",
                    data: {
                        username: "",
                        password: "",
                        msg: ""
                    },
                    methods:{
                        login:function(){
                           this.msg="正在登录";
                           axios.post("/api/oauth/login?username="+this.username+"&password="+app.password).then(function (res) {
                               if (res.data.flag){
                                   app.msg="登录成功";
                                   location.href="/api/webPage/index";
                               }else {
                                   app.msg="登录失败"
                               }
                           })
                        }
                    }
                })
            </script>


        </div>
    </div>
</div>
<script>
    (function () {
        // bile()
        {
            if (/iphone|nokia|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/ig.test(navigator.userAgent.toLowerCase())) {
                return true;
            } else {
                return false;
            }
        }

        if (isMobile()) {
            var tmpHtml = "<meta name='viewport' content='width=device-width, initial-scale=1'><link rel='stylesheet' href='/css/login_mobile.css'>";
            $("head").eq(0).append(tmpHtml);
        }
    })();

</script>
<!--[if lte IE 9]>
<script>
    $(function () {
        $('input').placeholder();
    })
</script>
<![endif]-->
<div class="copyright text-center" style="display: none;">
    <p>开课吧版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;京ICP备13032407号</p>
    <p>Copyright © 2014, www.kaikeba.com, All Rights Reserved</p>
</div>
</body>
</html>
<!--
本代码由js代码网网友上传，js代码网收集并编辑整理;
尊重他人劳动成果;
转载请保留js代码链接 - www.jsdaima.com
-->